<html>

<head>
    <meta charset="utf-8">
    <title>Clay汽车华容道</title>
    <link rel="stylesheet" href="./3rd/layui/css/layui.css">
    <script src="./3rd/layui/layui.js"></script>
    <script src="./3rd/jquery-3.7.1.min.js"></script>
</head>

<body>
<script type="module" src="./static/js/index.js"></script>
<script type="module" src="./static/js/game.js"></script>

<div class="layui-fluid layui-row">
    <div class="layui-col-md9 layui-col-sm9" style="display: flex;flex-direction: column;align-items: center;">
        <div style="display: flex;flex-direction: column;align-items: flex-start;">
            <div id="canvas_head" style="display: flex;flex-direction: row;">
                <button id="button_prev_p" type="button" class="layui-btn layui-btn-sm layui-btn-primary"
                        style="margin-right: auto;">
                    <i class="layui-icon layui-icon-left"></i>上一关
                </button>
                <h2 id="head_title" style="height: 40px; margin-right: 10px;">第</h2>
                <h2 id="head_title_edit" style="height: 40px;" contenteditable="true"></h2>
                <h2 id="head_title" style="height: 40px; margin-left: 10px;">关</h2>
                <button id="button_next_p" type="button" class="layui-btn layui-btn-sm layui-btn-primary"
                        style="margin-left: auto;">下一关
                    <i class="layui-icon layui-icon-right"></i>
                </button>
            </div>
            <div id="canvas_body" style="display: flex;align-items: flex-start;flex-direction: row;">
                <canvas id="myCanvas" style="margin-top: 10px;"></canvas>
                <div class="layui-btn-group"
                     style="display: flex;flex-direction: column;margin-top: 10px;/* margin-left: 11px; */ height: 573;">
                    <button id="button_reset" class="layui-btn layui-btn-primary layui-btn-sm">
                        重置步骤
                        <i class="layui-icon layui-icon-refresh"></i>
                    </button>
                    <button id="button_prev" class="layui-btn layui-btn-primary layui-btn-sm">
                        上一步
                        <i class="layui-icon layui-icon-up"></i>
                    </button>
                    <button id="button_next" class="layui-btn layui-btn-primary layui-btn-sm">
                        下一步
                        <i class="layui-icon layui-icon-down"></i>
                    </button>
                    <form class="layui-form" style="margin-left:10px" lay-filter="auto_next_switch_form">
                        <div class="layui-form-item">
                            <input type="checkbox" name="auto_next_switch" lay-filter="auto_next_switch" lay-skin="primary" title="自动下一关" checked="">
                        </div>
                    </form>

                    <span id="steps_show" class="layui-btn"></span>
                    <button id="btn_whoAmI" class="layui-btn layui-btn-primary" style="margin-top: auto;">我是谁？</button>
                    <button id="btn_reqSync" class="layui-btn layui-btn-primary" style="margin-bottom: 10px;">我要同步！</button>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md3 layui-col-sm3" style="display: flex;align-items: center;flex-direction: column;">
        <h2 style="height: 40px;">排行榜</h2>
        <table class="layui-hide" id="rank_table"></table>
    </div>
    <div>
        <!-- <a href="create">
            <button type="button" class="layui-btn">哥们要创造！</button>
        </a> -->
    </div>
</div>

</body>

</html>